<template>
  <div>
        <el-button type="primary" @click="showAddDialog = !showAddDialog">增加菜品</el-button>
        <el-dialog v-model="showAddDialog" title="增加菜品">
            <el-form label-width="120px">
                <el-form-item label="商品名称">
                    <el-input style="width:200px" v-model="goods.name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格">
                    <el-input style="width: 200px;" v-model="goods.price"></el-input>
                </el-form-item>
                <el-form-item label="商品数量">
                    <el-input style="width: 200px;" v-model="goods.num"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addGoods">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-table :data="tableData" style="width: 100%" height="500" border>
            <el-table-column
                label="菜品图片"
                width="180" header-align="center" >
                <template #default="scope">                
                    <img :src="scope.row.pic" alt="">
                </template>
            </el-table-column>
            <el-table-column
                prop="id"
                label="菜品编号"
                width="180" header-align="center">
            </el-table-column>
            <el-table-column
                prop="name"
                label="菜品名称"
                width="180" header-align="center">
            </el-table-column>
            <el-table-column
                prop="price" width="140"
                label="菜品价格（元）" header-align="center">
            </el-table-column>
            <el-table-column
                prop="num" width="180"
                label="菜品数量" header-align="center">
                <template #default="scope">
                    <el-input-number v-model="scope.row.num" @change="handleChange(scope)"
                     :min="1" :max="99" label="描述文字"></el-input-number>
                </template>    
            </el-table-column>
            <el-table-column
                width="140"
                label="操作" header-align="center">
                <template #default="scope">
                    <el-button type="danger" @click="remove(scope.row.id)"
                     size="samll" icon="el-icon-delete" ></el-button>                   
                </template>
            </el-table-column>
        </el-table>
        <div>
    
  </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'MenuList',
        data(){
                return {
                    tableData: [
                    ],
                     img:'https://img2.baidu.com/it/u=567357414,4240886412&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                    showAddDialog:false,
                    datas:null,
                    todos:null,
                    goods:{
                        name:"油闷小虾",
                        price:12,
                        num:12
                    }
                }
            },
            methods:{
                initData(){
                    const self = this
                    axios.get("http://127.0.0.1:3008/api/fe")
                    .then(res=>{
                        console.log(res.data);
                        self.datas = res.data[0].id
                        self.todos = res.data
                        console.log(res.data);
                        console.log(this.tableData);
                        this.tableData = res.data
                    })
                },
                onFileChange(img){
                    console.log(img);
                    this.img =  img.name

                },
                handleChange(scope){
                    axios.get('http://127.0.0.1:3008/api/updateNum?id='+ scope.row.id +'&num= '+scope.row.num+'')
                    .then(res=>{
                        console.log(res);
                        
                    })
                },
                remove(e) {
                    axios.get('http://127.0.0.1:3008/api/del?id='+ e +'')
                    .then(res=>{
                        console.log(res);
                        if(res.data.status == 1){
                            this.$message({
                                message:'删除成功',
                                duration:1000,
                                onClose:function(){
                                    location.reload();      //刷新当前页面
                                }
                            })  
                        }
                    })
                },               
                addGoods(){
                    const name = this.goods.name
                    const price = this.goods.price
                    const num = this.goods.num
                    axios.get(`http://127.0.0.1:3008/api/addGoods?name=${name} &price= ${price} &num= ${num} `)
                    .then(res=>{
                        console.log(res);
                        if(res.data.status == 1){
                            this.$message({
                                message:'增加成功',
                                duration:1000,
                                type: 'success',
                                onClose:function(){
                                    location.reload();      //刷新当前页面
                                }
                            })                        
                        }
                    })
                }
            },
            mounted(){
                    this.initData();
                }
}
</script>

<style>
img{
    width: 100px;
    height: 100px;
}
/* 让表格中内容元素居中 */
.el-table__body td .cell {
      text-align: center;
}
</style>